<template>
  <a-row class="j-select-biz-component-box" type="flex" :gutter="8">
    <a-col class="left" :class="{'full': !buttons}">
      <slot name="left">
        <a-select
          mode="multiple"
          :placeholder="placeholder"
          v-model="selectValue"
          :options="selectOptions"
          allowClear
          :disabled="false"
          :open="selectOpen"
          style="width: 100%;"
          @dropdownVisibleChange="handleDropdownVisibleChange"
          @click.native="visible=(buttons || disabled ?visible:true)"
          v-if="showOrHide"
        />
        <a-input v-else></a-input>

      </slot>
    </a-col>

    <a-col v-if="buttons" class="right">
      <a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{ selectButtonText }}
      </a-button>
    </a-col>

    <baojiadanmodal
      v-model="selectValue"
      :visible.sync="visible"
      v-bind="modalProps"
      @options="handleOptions"
      :multiple="multiple"
      :listUrl="url"
      @change="changeShowOrHide"
    />
  </a-row>
</template>
<!--:listUrl="url"-->
<script>
import baojiadanmodal from '@/components/jeecgbiz/baojiadan/baojiadanmodal.vue'

export default {
  name: 'baojia',
  components: { baojiadanmodal },
  props: {
    value: {
      type: String,
      default: ''
    },
    /** 是否返回 id，默认 false，返回 code */
    returnId: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否支持多选，默认 true
    multiple: {
      type: Boolean,
      default: true
    },
    // 是否显示按钮，默认 true
    buttons: {
      type: Boolean,
      default: true
    },
    // 显示的 Key
    displayKey: {
      type: String,
      default: null
    },
    // 返回的 key
    returnKeys: {
      type: Array,
      default: () => ['id', 'number']
    },
    // 选择按钮文字
    selectButtonText: {
      type: String,
      default: '选择'
    },
    url: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      showOrHide: false,
      selectValue: [],
      selectOptions: [],
      dataSourceMap: {},
      visible: false,
      selectOpen: false
    }
  },
  computed: {
    valueKey() {
      console.log('this.returnKeys[0]', this.returnKeys[0])
      console.log('this.returnKeys[1]', this.returnKeys[1])
      console.log('this.returnId', this.returnId)
      return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
    },
    modalProps() {
      console.log('this.valueKey', this.valueKey)
      console.log('this.multiple', this.multiple)
      console.log('this.returnKeys', this.returnKeys)
      return Object.assign({
        valueKey: this.valueKey,
        multiple: this.multiple,
        returnKeys: this.returnKeys,
        displayKey: this.displayKey || this.valueKey
      }, this.$attrs)
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (val) {
          this.selectValue = val.split(',')
        } else {
          this.selectValue = []
        }
      }
    },
    url: {
      immediate: true,
      handler(val) {
        console.log('传递URL的变化值', val)
      }
    },
    selectValue: {
      deep: true,
      handler(val) {
        console.log('this.dataSourceMap', this.dataSourceMap)
        let rows = val.map(key => this.dataSourceMap[key])
        console.log('rows', rows)
        let data = val.join(',')
        if (data !== this.value) {
          this.$emit('select', rows)
          this.$emit('input', data)
          this.$emit('change', data)
        }
      }
    }
  },
  methods: {
    changeShowOrHide() {
      this.showOrHide = true
    },
    handleOptions(options, dataSourceMap) {
      this.selectOptions = options
      this.dataSourceMap = dataSourceMap
      console.log('selectOptions', this.selectOptions)
      let checkKehu = this.selectOptions.some(res => {
        // return res.value==selectValue
        return this.selectValue.some(res1 => {

          return res1 == res.value
        })
      })
      console.log('=============checkKehu================', checkKehu)
      if (checkKehu) {
        this.showOrHide = true
      } else {
        this.showOrHide = false
      }
    },
    handleDropdownVisibleChange() {
      // 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效
      this.selectOpen = true
      this.$nextTick(() => {
        this.selectOpen = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.j-select-biz-component-box {

  @width: 82px;

  .left {
    width: calc(100% - @width - 8px);
  }

  .right {
    width: @width;
  }

  .full {
    width: 100%;
  }

  /deep/ .ant-select-search__field {
    display: none !important;
  }
}
</style>